import { createElement, HTMLAttributes, type FC } from 'react';
import classNames from 'classnames';
import { progressBarDefaultProps } from './defaultProps';
import type { ProgressBarOptions } from './type';

export interface ProgressBarProps extends ProgressBarOptions, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {}

const ProgressBar: FC<ProgressBarProps> = (props) => {
  const { className, ui, color, centered, progress, forwardedRef, ...progressBarProps } = props;

  return createElement(
    'div',
    {
      ref: forwardedRef,
      className: classNames({ ui }, color, 'bar', className),
      ...progressBarProps,
    },
    progress && createElement('div', { className: classNames({ centered }, 'progress') }, progress),
  );
};

ProgressBar.displayName = 'ProgressBar';
ProgressBar.defaultProps = progressBarDefaultProps;

export default ProgressBar;
